<!-- 播放列表页面 -->
<template>
    <div class="playContainer">
        <!-- 顶部 -->
        <div class="topCon">
            <van-image width="100" height="100"
                :src="`https://imagev2.xmcdn.com/${headerList?.albumInfo.cover}!op_type=3&columns=144&rows=144&magick=webp`" />
            <div class="right">
                <span class="txt">{{headerList?.albumInfo.title }}</span>
                <span>logo+{{ userList?.userInfo.nickname }}</span>
                <span>已订阅{{headerList?.statCountInfo.subscribeCount}}人</span>
            </div>
        </div>
        <!-- 描述 -->
        <div class="desc">
            {{ headerList?.albumInfo.shortIntro }}
        </div>
        <!-- 节目 -->
        <div class="play">
            <span>节目</span>
            <van-cell-group border>
                <van-cell v-for="album in albumList?.trackDetailInfos" >
                    <template #title>
                        <div>
                            <van-icon center name="play-circle-o" size="20px" />
                            <span class="txt">{{ album.trackInfo.title }}</span>
                        </div>
                    </template>
                    <template #right-icon>
                        <!-- class-prefix="my-icon" -->
                        <van-icon  name="down" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 主播信息 -->
        <div class="info">
            <span>主播信息</span>
            <div class="title">
                <van-image round class="img"
                    :src="`https://imagev2.xmcdn.com/${userList?.userInfo.logo}!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp`" />
                <div class='middle'>
                    <span>{{userList?.userInfo.nickname}}</span>
                    <span>{{userList?.userInfo. personalSignature }}</span>
                    <span>logo+{{ userList?.statCountInfo.followerCount}}</span>
                </div>
                <div class="right">
                    <van-icon name="contact-o" color="red" />
                    <span class="add">加关注</span>
                </div>
            </div>
            <div class="bottom">
                <div class="card" v-for="item in userWork?.albumBriefDetailInfos" :key="item.id">
                    <van-image
                        :src="`https://imagev2.xmcdn.com/${item?.albumInfo.cover}!op_type=3&columns=144&rows=144&magick=webp`" />
                    <span class="txt">{{ item?.albumInfo. title}}</span>
                </div>
            </div>
        </div>
        <!-- 用户评论 -->
        <div class="comment">
            <span>用户评论</span>
            <div class="content" v-for="item in userReview?.comments" :key="item.id">
                <van-image round width="50" height="50"
                    :src="`https://imagev2.xmcdn.com/${item.smallHeader}!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp`"></van-image>
                <div class="context">
                    <span class="nickname">{{item.nickname}}</span>
                    <span class="con" v-html="item.content"></span>
                    <div class="reply">
                        <div>回复{{new Date(item.updatedAt).getFullYear()+'年'+(new Date(item.updatedAt).getMonth()+1)+'月'+new Date(item.updatedAt).getDay()+'日'}}</div>
                        <div>{{ item.likes }}<van-icon name="good-job-o" /></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 相似专辑 -->
        <div class="album">
            <span class="title">相似专辑</span>
            <div class="bottom">
                <div class="card" v-for="item in seemAlbum?.album.docs" :key="item.id">
                    <van-image
                        class="img"
                        :src="`https://imagev2.xmcdn.com/${item.coverPath}!op_type=3&columns=144&rows=144&magick=webp`" />
                    <div class="txt">{{item.title}}</div>
                </div>
            </div>
            <div class="btn">
                <van-button size="small" round plain type="danger" @click="changArr">换一批</van-button>
            </div>
        </div>
        

        <!-- 猜你喜欢 -->
        <div class="like">
            <span class="tit">猜你喜欢</span>
            <ul class="list">
                <li v-for="item in likeList?.albums" :key="item.albumId">
                    <div class="box">
                        <van-image class="img"
                            :src="`https://imagev2.xmcdn.com/${item.albumCoverPath}!op_type=3&columns=144&rows=144&magick=webp`" />
                        <div class="txt">
                            <span class="title">{{item.albumTitle}}</span>
                            <span>{{item.intro}}</span>
                            <div class="spanleft">
                                <div>
                                    <van-icon color="gray" name="play-circle-o" />
                                    {{item.albumPlayCount}}
                                </div>
                                <div>
                                    <van-icon color="gray" name="play-circle-o" />
                                    {{ item.albumTrackCount }}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>


    </div>
</template>

<script setup lang="ts">
    import request from '@/api/playlist/index'
    import {onMounted,ref} from 'vue'
    import { useRoute } from 'vue-router';

    const route=useRoute();
    const id=ref<any>(route.query.id)//存储主页传过来的id,目前接口写死了
    const headerList=ref<any>()
    const albumList=ref<any>()
    const userList=ref<any>()
    const userWork=ref<any>()
    const userReview=ref<any>()
    const seemAlbum=ref<any>()
    const likeList=ref<any>()

    const page=ref<any>(1);
    const pageSize=ref<any>(10);


    const anchorId=ref<any>();

 



    // 点击按钮的回调
    const changArr=()=>{
        page.value+=1
        getSeemAlbum(page.value)
    }




    const getHeader=async()=>{
       let res= await request.reqHearder(id.value)
       console.log('头部数据',res);
    //    headerList.value=res
       headerList.value=res.albumDetailInfo
    }
    const getAlbumList=async()=>{
        let res=await request.reqAlbumList(id.value,page.value,pageSize.value);
        // console.log('节目列表数据',res)
        albumList.value=res
        anchorId.value=res.trackDetailInfos[0].trackInfo.anchorId
        getUserinfo();
        getUserwork()
        // console.log('收到的id',anchorId.value)
    }
    const getUserinfo=async()=>{
        let res=await request.reqUserinfo(anchorId.value);
        // console.log('主播数据',res)
        userList.value=res

    }
    const getUserwork=async()=>{
        let res=await request.reqUserWorks(anchorId.value);
        // console.log('主播作品数据',res)
        userWork.value=res
    }
    const getUserReview=async()=>{
        let res=await request.reqReviewInfo(id.value);
        console.log('用户评论数据',res)
        userReview.value=res
    }
    const getSeemAlbum=async(page:number)=>{
        let res=await request.reqSeemAlbum(page);
        console.log('相似专辑数据',res)
        seemAlbum.value=res;
    }
    const getLike=async()=>{
        let res=await request.reqLike(1,1,1);
        console.log('猜你喜欢数据',res)
        likeList.value=res;
    }

    onMounted(()=>{
        getHeader()
        getAlbumList()
        // getUserinfo()
        // getUserwork()
        getUserReview()
        getSeemAlbum(page.value)
        getLike()
    })
</script>

<style lang="less">
.playContainer {
    width: 100%;
    // background-color: red;

    .topCon {
        width: 90%;
        margin: auto;
        padding: 20px;
        background-image: linear-gradient(to bottom, rgb(136, 136, 136), white);
        // background-color: rgb(169, 169, 169);
        display: flex;

        align-items: center;

        .right {
            flex: 1;
            margin-left: 10px;
            font-size: 10px;
            .txt{
                overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;

                
            }
            span {
                display: block;
                color: white;

                padding: 5px 0;
            }

            span:first-child {
                // color: red;
                font-size: 20px;
            }

        }
    }

    .desc {
        padding: 10px;
        font-size: 15px;
        // background-color: blue;
    }

    .play {
        span:first-child {
            font-size: 20px;
            padding: 10px;
            font-weight: bold;
        }
        
        .txt {
            font-size: 16px;
            padding: 10px;
            align-items: center;
        }
    }
    // 主播信息
    .info {
        span:first-child {
            font-size: 18px;
            font-weight: bold;
            padding-left: 10px;
        }

        .title {
            display: flex;
            align-items: center;
            margin:10px auto;
            span {
                font-size: 10px;
                padding-left: 10px;
            }

            .img {
                width:25%;
                padding-left: 10px;
            }

            .middle,
            .right {
                display: flex;
                flex-direction: column;
            }

            .middle {
                width: 60%;
                // background-color: red;
                span{
                    padding: 5px 0;
                }
            }
            .right {
                align-items: center;

                .add {
                    font-size: 10px;
                    padding: 0;
                }
            }


        }

        .bottom {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;

            .card {
                width: 30%;
                margin: 10px auto;
                display: flex;
                flex-direction: column;
                .txt{
                    margin-top: 10px;
                    font-size: 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }



    }

    // 用户评论
    .comment {
        span:first-child {
            font-size: 20px;
            padding: 10px;
            font-weight: bold;
            display: block;
        }

        .content {
            // background-color: bisque;
            // padding: 10px;
            display: flex;

            .context {
                flex: 1;
                .con image,.emoji{
                    width:20px;
                }
                .nickname {
                    color: gray;
                }
            }

            span {
                padding: 5px;
                font-size: 10px;
            }

            .reply {
                display: flex;
                flex: 1;
                color: gray;
                padding: 5px;
                font-size: 10px;
                justify-content: space-between;
            }
        }
    }


    // 相似专辑
    .album {
        .title {
            font-size: 20px;
            padding: 10px;
            font-weight: bold;
        }

        .bottom {
            margin-top: 10px;
            display: flex;
            // justify-content:space-around;
            flex-wrap: wrap;
            margin: 0 auto;
            .card {
                // background-color: red;
                width: 30%;
                margin: 5px;
                .img{
                    width:100%;
                }

                .txt {
                    padding: 0;
                    font-size: 10px;
                    // background-color: skyblue;
                }
            }
        }
        .btn{
            display: flex;
            justify-content: center;
            
        }

    }

    // 猜你喜欢
    .like {
        .tit{
            font-size: 20px;
            padding: 10px;
            font-weight: bold;
        }

        .list {
            li{
                padding: 10px;
                .box{
                    display: flex;
                    .img{
                        width:30%;
                    }
                    .txt{
                        width:70%;
                        flex: 1;
                        // background-color: greenyellow;
                        display: flex;
                        padding: 10px;
                        flex-direction: column;
                        justify-content: center;
                        font-size: 10px;
                        span{
                            padding: 5px;   
                        }
                        .title{
                                font-size: 20px;
                                overflow: hidden;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                            }
                        .spanleft{
                            width:70%;
                            // background-color: skyblue;
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }

        }
    }
}
</style>